<template>
  <div class="videoDetail">
    <mt-header>
      <mt-button icon="back" slot="left" @click="fromUrl">返回</mt-button>
    </mt-header>

    <div class="player">
      <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)">
      </video-player>
    </div>

    <div class="container">
      <div class="detail-title" v-text="title"></div>
      <div class="">
        <div class="videoInfo">
          <div>
            <span>主讲老师：</span>
            <span v-text="teacher"></span>
          </div>
          <div>
            <span v-text="playNum" class="playNum"></span>
            <span>人学过</span>
          </div>
        </div>
        <p v-text="description" class="description"></p>
        <div class="collect" @click="collect">
          <img src="../assets/like.png" v-show="!likeimg" class="islike" alt="">
          <img src="../assets/islike.png" v-show="likeimg" class="islike" alt="">
          <p class="articleInfo" v-show="!likeimg">点击收藏</p>
          <p class="articleInfo" v-show="likeimg">已收藏</p>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="detail-title">课程详情：</div>
      <div class="detail" v-text="detail"></div>
    </div>
  </div>
</template>


<script>
  import {
    formatDate
  } from "../common/date.js";
  import {
    videoPlayer
  } from "vue-video-player";
  import {
    getVideo_Axios,
    watchVideo_Axios,
    dislikeVideo_Axios,
    likeVideo_Axios,
  } from './axios/api';

  export default {
    components: {
      videoPlayer
    },
    methods: {
      fromUrl() {
        this.$router.go(-1);
      },
      getVideo: function (id) {
        let v_id = this.$route.query.id;
        let userId = this.userId;
        getVideo_Axios(v_id, userId).then(response => {
          console.log('response', response);
          let videoDetail = response.data.data;
          this.getSubject = response.data.data.subject;
          this.title = videoDetail.title;
          this.teacher = videoDetail.teacher;
          this.playNum = videoDetail.playNum;
          this.description = videoDetail.description;
          this.detail = videoDetail.detail;
          this.playerOptions.sources[0].src = videoDetail.url;
          this.playerOptions.poster = videoDetail.cover;
          this.likeimg = videoDetail.collected;
          // console.log("get此文章是否收藏 :", videoDetail.collected);
        });
      },
      //观看视频，阅读加1
      onPlayerPlay(player, id) {
        let v_id = this.$route.query.id;
        let userId = this.userId;
        console.log("tag", v_id);
        watchVideo_Axios(v_id).then(response => {});
      },
      onPlayerPause(player) {
        //   alert("pause");
      },
      collect: function (id) {
        let v_id = this.$route.query.id;
        let userId = this.userId;
        if (this.likeimg == true) {
          console.log('this.getSubject', this.getSubject);
          dislikeVideo_Axios(v_id, userId)
            .then(response => {
              console.log(response);
              this.likeimg = !this.likeimg;
              this.$vux.toast.show({
                text: "取消收藏成功",
                width: "15rem",
                time: 600
              });
            });
        } else {
          let v_id = this.$route.query.id;
          console.log('this.getSubject', this.getSubject);
          let subject = this.getSubject;
          let userId = this.userId;
          //收藏文章
          likeVideo_Axios(v_id, userId,subject).then(response => {
              console.log(response);
              this.likeimg = !this.likeimg;
              this.$vux.toast.show({
                text: "收藏成功",
                width: "15rem",
                time: 600
              });
            });
        }
      },
      gobackVideo: function () {
        this.$router.push({
          path: "/Video"
        });
      }
    },
    data() {
      return {
        title: "",
        teacher: "",
        playNum: "",
        description: "",
        detail: "",
        collected: "",
        likeinfo: true,
        likeimg: true,
        getSubject: '',
        userId: sessionStorage.getItem('id'),
        playerOptions: {
          //        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: "zh-CN",
          aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: "video/mp4",
            src: "" //你的视频地址（必填）
          }],
          poster: "", //你的封面地址
          width: document.documentElement.clientWidth,
          // notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true //全屏按钮
          }
        },
      };
    },
    filters: {
      formatDate(time) {
        var date = new Date(time);
        return formatDate(date, "yyyy-MM-dd");
        // return formatDate(date, "yyyy-MM-dd hh:mm");
      }
    },
    mounted() {
      this.getVideo();
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player;
      }
    }
  };

</script>

<style lang="scss" scoped>
  .videoDetail {
    background-color: #fbf3d0;
    height: 100%;
    min-height: 100vh;
  }

  .detail-title {
    font-weight: bold;
    font-size: 20px;
    padding: 10px 0;
    text-align: left;
  }

  .videoInfo {
    display: flex;
    justify-content: space-between;
    text-align: left;
    font-size: 14px;
    color: #aaaaaa;

  }

  .content {
    text-align: left;
    margin: 20px 0;
    margin-bottom: 50px;
    text-indent: 2em;
  }

  .description {
    margin: 13px 0;
    font-size: 16px;
    font-family: "Trebuchet MS";
    text-align: left;
    color: rgba(126, 83, 3, 0.973);
  }

  .collect {
    display: flex;
    align-items: center;
    font-size: 15px;
    .islike {
      width: 30px;
      margin-right: 10px;
    }
  }

  .container {
    margin: 20px; // background-color: #ffffff;
    .detail {
      text-align: left;
      text-indent: 2em;
      font-size: 14px;
      color: rgba(126, 83, 3, 0.973);
    }
  }

</style>
